<template>
  <div class="home  d-flex flex-column my-container">

    <div class="title-container" v-if="permersion.search">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input v-model="searchModel.applicationName" clearable @clear="searchClick" placeholder="请输入应用场景名称" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="" v-if="permersion.search">

        <el-form :inline="true">
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            <el-button type="primary" icon="el-icon-plus" v-permission="'YYCJ_ADD'" @click="newScenarioClick">添加应用场景</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <common-table v-loading="tableLoading" show-index show-check-box :columns="columns" :list="list">
        </common-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>
    <template v-if="dialogVisible">
      <MoudleDialog :dialogVis="dialogVisible" :applicationCode="applicationCode" @update:dialogVis="closeDialog">
      </MoudleDialog>
    </template>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newScenarioModel"
            :rules="rules"
            ref="loginFormRef"
            label-width="120px"
          >
            <el-form-item label="应用场景名称" prop="applicationName">
              <el-input v-model="newScenarioModel.applicationName"/>
            </el-form-item>
            <el-form-item label="应用场景描述">
              <el-input
                type="textarea"
                :rows="3"
                v-model="newScenarioModel.applicationDes"
              />
            </el-form-item>
            <el-form-item label="应用场景贴图" prop="applicationPic">
              <div style="display: flex;">
                <el-image
                  v-if="newScenarioModel.applicationPic"
                  style="width: 50px; height: 50px;margin-right: 20px;"
                  :src="newScenarioModel.applicationPic"
                  fit="scale-down"></el-image>
                <el-button icon="el-icon-plus" @click="openSelectImgDialog">选择图片</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <yc-dialog
      ref="selectImg"
      dialogTitle="选择图片"
      centerTitle="选择图片"
    >
      <template #content>
        <div class="dialog-content">
          <div class="imgContent">
            <div class="block" v-for="item in imgList" :key="item.id">
              <!--               {{item.name}}-->
              <el-radio v-model="radio" :label="item.configValue">{{item.configKey}}</el-radio>
              <el-image
                @click="clickImgItem(item)"
                style="width: 100px; height: 100px"
                :src="item.configValue"
                fit="scale-down"></el-image>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="chooseImgBtn">确定</el-button>
        <el-button @click="$refs.selectImg.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import {
    queryPageApplicationScenarios,
    insertApplicationScenarios,
    queryEnumConfigList,
    deleteApplicationScenarios
  } from "@/api/businessScenario/index"
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import MoudleDialog from "./dialog/index.vue"
  import ycDialog from "@/components/pageDialog"

  export default {
    components: {
      CommonTable,
      MoudleDialog,
      ycDialog
    },
    data() {
      return {
        value: "",
        count: 0,
        dialogVisible: false,
        permersion: {
          add: true,
          del: true,
          update: true,
          search: true
        },
        searchModel: {
          applicationName: ""
        },
        columns: [
          {
            title: "应用场景编码",
            prop: "applicationCode",
            align: "center"
          },

          {
            title: "应用场景名称",
            prop: "applicationName",
            align: "center"
          },
          {
            title: "应用场景描述",
            prop: "applicationDes",
            align: "center"
          },
          {
            title: "绑定工作流数量",
            prop: "applicationToWorkNum",
            align: "center"
          },
          {
            title: "创建人",
            prop: "createByName",
            align: "center"
          },
          {
            title: "创建时间",
            prop: "createTime",
            align: "center"
          },
          {
            title: "更新人",
            prop: "updateByName",
            align: "center"
          },
          {
            title: "更新时间",
            prop: "updateTime",
            align: "center"
          },
          {
            title: "操作",
            width: "200",
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-button", {
                props: {
                  type: "primary",
                  size: "mini"
                },
                on: {
                  click: () => {
                    this.handleConfig(params.row)
                  }
                }
              }, "配置"),
                h("el-button", {
                  props: {
                    type: "danger",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row)
                    }
                  }
                }, "删除")])
            }
          }
        ],
        list: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        applicationCode: "",

        newScenarioModel: {
          applicationName: "",
          applicationDes: "",
          applicationPic: ""
        },
        applicationPic: "",
        dialogTitle: "",
        dialogCenterTitle: "",
        isGlobalMessageShow: "",
        message: "",
        upload: "/uploadManager/upload",
        rules: {
          applicationName: [
            { required: true, message: "请填写应用场景名称", trigger: "blur" }
          ],
          applicationPic: [{ required: true, message: "请选择应用场景贴图", trigger: "click" }]
        },
        selectImgDialogVisible: false,
        imgList: [],
        radio: "1",
        addOrUpdateLoading: false,

        tableLoading: false
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      async getTableList() {
        this.tableLoading = true
        const { applicationName } = this.searchModel
        const { status, success, object, message } = await queryPageApplicationScenarios({
          ...this.page,
          applicationName
        })
        if (status == 200) {
          this.tableLoading = false
          this.list = object.data
          this.count = object.count
        }
      },
      searchClick() {
        this.getTableList()
      },


      newScenarioClick() {
        this.applicationPic = ""
        Object.keys(this.newScenarioModel).forEach((item) => {
          this.newScenarioModel[item] = ""
        })
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
        this.dialogTitle = "添加用户场景"
        this.dialogCenterTitle = "用户场景信息"
      },
      openSelectImgDialog() {
        this.radio = this.newScenarioModel.applicationPic
        queryEnumConfigList({ type: 5 }).then(res => {
          if (res.status == "200") {
            this.imgList = res.object
          }
        })
        this.$refs.selectImg.dialogVisible = true
      },
      clickImgItem(data) {
        this.radio = data.configValue
      },
      chooseImgBtn() {
        this.newScenarioModel.applicationPic = this.radio
        this.$refs.selectImg.dialogVisible = false
      },
      async dialogSave() {
        this.$refs.loginFormRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true
            const { status, message } = await insertApplicationScenarios({
              // projectCode: this.projectCode,
              ...this.newScenarioModel
              // applicationPic: this.applicationPic
            })
            if (status == 200) {
              this.$message({
                message: message,
                type: "success"
              })
              this.$refs.ycDialog.dialogVisible = false
              this.getTableList()
            }
            this.addOrUpdateLoading = false
          }
        })

      },


      handleDelete({ id }) {
        this.$confirm("确定删除此场景吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const { status, message } = await deleteApplicationScenarios({ id })
          if (status == 200) {
            this.getTableList()
            this.$message({
              message: message,
              type: "success"
            })
          }
        })
      },

      refresh() {
        this.searchModel = {
          applicationName: ""
        }
        this.getTableList()
      },
      closeDialog() {
        this.dialogVisible = false
        this.getTableList()
      },
      handleConfig(row) {
        this.applicationCode = row.applicationCode
        this.dialogVisible = true
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .imgContent {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;

    .block {
      height: 130px;
      width: 130px;
    }
  }
</style>
